<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="keywords" content="百度地图,百度地图API，百度地图自定义工具，百度地图所见即所得工具" />
    <meta name="description" content="百度地图API自定义地图，帮助用户在可视化操作下生成百度地图" />
    <title>hall</title>
    <!--引用百度地图API-->
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=VxxhFrZDTMIUsnkU3MZG7hTW3Lfp1qb0"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/headerCss.css">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <style>
        /*banner开始~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
        #f-banner {
            width:auto !important;
            height: 330px;
            position: relative;
            background-image: url("img/2.jpg");
        }
        #banner{
            width: 1200px;
            height: 376px;
            margin: 0 auto;
            position: relative;
            color: white;
        }

        #banner > #img {
            width: 300px;
            height: 370px;
            position: relative;/*相对定位*/
            top: 50px;
            left: 10px;
            text-align: center;
        }
        #banner > #img > img{
            width: 300px;
            height:300px;
            border: 4px solid white;

        }
        #banner > #name {
            width: 900px;
            height: 155px;
            padding-left: 20px;
            position: absolute;/*相对定位*/
            top: 10px;
            left: 330px;
        }


        #name > h2 {
            margin: 0;
        }

        #name > h3 {
            margin: 0 0 0px 0;
        }

        .name_div{
            overflow: hidden;
            margin-bottom: 2px;
        }
        .name_div > span {
            display: block;
            width: 50px;
            height: 20px;
            font-size: 12px;
            color: white;
            text-align: center;
            line-height: 20px;
            border: 1px solid #b8b8b8;
            border-radius: 3px;
            float: left;
        }

        .name_div > p {
           font-size: 12px;
            float: left;
            margin: 2px  0 0 5px ;
        }


        #map{
            position:absolute;
            right: 0px;
            top: 100px;
        }

        /*banner结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

        #main{
            width: 1200px;
            height: 100%;
            margin: 0 auto;
            margin-top: 80px;
            overflow: hidden;
        }
        /*introduce电影介绍*/
        #introduce{
            width: 730px;
            height: 100%;
            float: left;
        }
        #introduce > #m1 {
            margin-bottom: 25px;
        }

        .m2_div{
            float: left;
            margin: 40px 0 0 50px;
            border:4px solid white;
        }

        .m2_div> img {
            transition-duration: 0s;/*设置动画持续时间*/
        }
        .m2_div> img:hover {
            transform: scale(1.2);/*缩放1.2倍*/
            border:4px solid red;
        }
        #m3 > h2 {
            font-weight:normal ;
            font-size: 26px ; color: #333333 ;
            float: left ;
            margin: 0;
            position: relative;
            bottom: 3px;
        }

        #m4>span{
            font-size: 14px;
        }

        #m5 > a {
            display: block;
            width: 100px;
            height: 23px;
            background-color: red;
            color: white;
            margin-left: 30px;
            text-align: center;
            border-radius: 15px;
            float: left;
            text-decoration :none;
            line-height: 23px;
        }

        tbody{
            text-align: center;
        }
        tbody > tr > td > a {
            display: block;
            width: 90px;
            height: 23px;
            background-color: red;
            color: white;
            text-align: center;
            border-radius: 15px;
            text-decoration :none;
            line-height: 23px;
            margin-left: 30%;
        }

        #m8 > div > a{
            color: black;
            float: left;
            text-decoration :none;
            margin-right: 10px;

        }
    </style>
</head>
<body>
<myheader :search="search"></myheader>
<div style="height: 80px"></div>
<div id="f-banner">
    <div id="banner">
        <div id="img">
            <img src="img3/1.png" alt=""  >
        </div>
        <div id="name">

            <h1 style="font-size: 27px ; margin-bottom: 9px ; font-weight:normal">
                CGV影城（东二环IMAX店）
            </h1>
            <div  style="font-size: 14px ;margin-bottom: 6px ;">晋安区岳峰镇东二环22号楼泰禾广场6层</div>
            <div  style="font-size: 14px ; margin-bottom: 20px ;">电话：0591-28026000</div>
            <div style="overflow: hidden">
                <div  style="font-size: 14px ;margin-bottom: 5px ; float: left">影院服务</div>
                <div style="height: 0px ; width: 400px ; border: 1px solid white;float: left ; margin: 9px 0 0 5px"></div>
            </div>
            <div class="name_div">
                <span>改签</span>
                <p>未取票用户放映前60分钟可改签</p>
            </div>
            <div class="name_div">
                <span>3D眼镜</span>
                <p>为了您的观影安全，请您自备或至影城购买独立包装3D眼镜</p>
            </div>
            <div class="name_div">
                <span>儿童优惠</span>
                <p>1.3米以下儿童普通厅免费无座观影，一名成人限带一名儿童，4DX，IMAX...</p>
            </div>
            <div class="name_div">
                <span>情侣座</span>
                <p>SWEETBOX厅为情侣座</p>
            </div>

        </div>

        <div style="width:200px;height:200px;border:#ccc solid 1px;font-size:12px" id="map"></div>
        <p style="color:red;font-weight:600">
            <a href="http://developer.baidu.com/map/index.php?title=jspopular/guide/introduction" style="color:#2f83c7"
               target="_blank"></a>
            <a href="http://lbsyun.baidu.com/apiconsole/key?application=key" style="color:#2f83c7" target="_blank"></a>
        </p>
        </div>
    </div>
</div>
</div>
<div id="main">
    <div id="introduce">
        <div id="m1">
            <span style="font-size: 14px ; color: #666666">猫眼电影 > 影院 > CGV影城（东二环IMAX店）</span>
        </div>
        <div id="m2">
            <div id="m2-Div" style="height: 280px ; width: 1200px ; background-color: #ededed">
                <div class="m2_div"><img src="img3/2.jpg" alt="" width="132px" height="186"></div>
                <div class="m2_div"><img src="img3/2.jpg" alt="" width="132px" height="186"></div>
                <div class="m2_div"><img src="img3/2.jpg" alt="" width="132px" height="186"></div>
                <div class="m2_div"><img src="img3/2.jpg" alt="" width="132px" height="186"></div>
            </div>
        </div>
        <div id="m3" style="margin-top: 20px ; overflow: hidden ; ">
            <h2 >长津湖</h2>
            <span style="font-weight:normal ; font-size: 24px ; color: #faaf00 ; position: relative;
            left: 27px;">9,5分</span>
        </div>
        <div id="m4" style="margin: 15px 0">
            <span style="color: #999999">时长 : </span>
            <span style="margin-right: 40px">176分钟</span>
            <span style="color: #999999">类型 : </span>
            <span style="margin-right: 40px">剧情</span>
            <span style="color: #999999">主演 : </span>
            <span style="margin-right: 40px">吴京 易烊千玺 段奕宏</span>
        </div>
        <hr style="width: 1200px">

        <div id="m5" style=" overflow: hidden ; margin: 30px 0 ; font-size: 14px">
            <span style="color: #999999 ; float: left">观影时间 : </span>
            <a href="">今天 10月20</a>
            <a href="">今天 10月21</a>
            <a href="">今天 10月22</a>

        </div>

        <div id="m6" style="width: 100%">
            <table style=" width: 1200px ; border-collapse:collapse">
                <thead style="background-color: #f7f7f7 ;height: 53px ; border: 0px">
                    <tr>
                        <th width="20%">放映时间</th>
                        <th width="20%">语言版本</th>
                        <th width="20%">放映厅</th>
                        <th width="20%">售价（元）</th>
                        <th width="20%">选座购票</th>
                    </tr>
                </thead>
                <tbody style="background-color: white  ;height: 82px ; border: 0px">
                <tr>
                    <td width="20%">
                        <span style="display:inline-block ; font-size: 18px ; font-weight: bold">11:10</span><br>
                        <span style="display:inline-block ; font-size: 12px ; color: #999999">14:06散场</span>
                    </td>
                    <td width="20%" style="font-size: 14px ; color: #333333">中文2D</td>
                    <td width="20%" style="font-size: 14px ; color: #333333">激光1厅(大)</td>
                    <td  width="20%" style="font-size: 18px ; color: red ; font-weight: bold">￥100</td>
                    <td width="20%" style="text-align: center">
                        <a href="./chooseseat.html">选座购票</a>
                    </td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<!--引入axios-->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="js/header.js"></script>
<script>
    let count = 0
    function fn() {
        count++
        $("#s1").text(count);
    }

    $(function () {
        $(".like").click(function () {
            $(this).toggleClass('cs');
        })
    })

    // $(".m2_div > img").click(function () {//自定义
    //     //修改元素的样式 为相对定位
    //     $(".m2_div > img").css("position","relative");
    //     //自定义动画
    //     $("img").animate({"left":"200px"},1000)
    //         .animate({"top":"200px"},1000)
    //         .animate({"left":"0px"},1000)
    //         .animate({"top":"0px"},1000)
    //
    // })

</script>
</body>
<script type="text/javascript">
    //创建和初始化地图函数：
    function initMap(){
        createMap();//创建地图
        setMapEvent();//设置地图事件
        addMapControl();//向地图添加控件
        addMapOverlay();//向地图添加覆盖物
    }
    function createMap(){
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(119.344618,26.095423),15);
    }
    function setMapEvent(){
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom()
    }
    function addClickHandler(target,window){
        target.addEventListener("click",function(){
            target.openInfoWindow(window);
        });
    }
    function addMapOverlay(){
        var markers = [
            {content:"",title:"目的地",imageOffset: {width:-23,height:-21},position:{lat:26.096656,lng:119.343253}}
        ];
        for(var index = 0; index < markers.length; index++ ){
            var point = new BMap.Point(markers[index].position.lng,markers[index].position.lat);
            var marker = new BMap.Marker(point,{icon:new BMap.Icon("http://api.map.baidu.com/lbsapi/createmap/images/icon.png",new BMap.Size(20,25),{
                    imageOffset: new BMap.Size(markers[index].imageOffset.width,markers[index].imageOffset.height)
                })});
            var label = new BMap.Label(markers[index].title,{offset: new BMap.Size(25,5)});
            var opts = {
                width: 200,
                title: markers[index].title,
                enableMessage: false
            };
            var infoWindow = new BMap.InfoWindow(markers[index].content,opts);
            marker.setLabel(label);
            addClickHandler(marker,infoWindow);
            map.addOverlay(marker);
        };
    }
    //向地图添加控件
    function addMapControl(){
        var scaleControl = new BMap.ScaleControl({anchor:BMAP_ANCHOR_BOTTOM_LEFT});
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({anchor:BMAP_ANCHOR_TOP_LEFT,type:3});
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({anchor:BMAP_ANCHOR_BOTTOM_RIGHT,isOpen:false});
        map.addControl(overviewControl);
    }
    var map;
    initMap();
</script>
</html>